<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<head>
    <style type="text/css">
            .labelsAndValues-labelCell { background-color: #E0E690; padding-left: 5px; } 
    </style>
    <script type="text/javascript">
       dojo.require("dojo.parser");
       dojo.require("dijit.dijit");
       dojo.require("dijit.form.Form");
       dojo.require("dijit.form.Button");
       dojo.require("dijit.form.TextBox");       
       dojo.require("dojox.form.DropDownSelect");       
       dojo.require("dojox.layout.TableContainer"); 
       dojo.require("dojox.data.QueryReadStore");
       dojo.require("dojox.form.DateTextBox");      
    </script>
</head>
<div dojoType="dijit.form.Form" id="frmDCC" jsId="frmDCC" encType="multipart/form-data" action="paymentDone.htm" method="post">
 <div dojoType="dojox.layout.TableContainer" cols="1" id="tcCreateItem" customClass="labelsAndValues">
    <div dojoType="dijit.form.TextBox" title="First Name:" id="firstName" name="firstName"  value="testuser"></div>
    <div dojoType="dijit.form.TextBox" title="Last Name:" id="lastName" name="lastName"  value="testuser"></div>
    <div dojoType="dojox.form.DropDownSelect" title="Card Type:" id="cardType"></div>
    <div dojoType="dijit.form.TextBox" title="Card Number:" id="creditCardNumber" name="creditCardNumber" value="4635985352027491"></div>
	<div dojoType="dojox.form.DateTextBox" title=" Expiration Date:" id="expiryDate" name="expiryDate"></div>
	<div dojoType="dijit.form.TextBox" title="Card Verification Number:" id="CVV2" name="CVV2" value="123"></div>
	<div dojoType="dijit.form.TextBox" title="Address1:" id="address1" name="address1" value="1 Main St"></div>
	<div dojoType="dijit.form.TextBox" title="Address1:" id="address2" name="address2" value="(Optional)"></div>
	<div dojoType="dijit.form.TextBox" title="City:" id="city" name="city" value="San Jose"></div>
	<div dojoType="dojox.form.DropDownSelect" title="State:" id="state"></div>
	<div dojoType="dijit.form.TextBox" title="Country:" id="country" name="country" value="United States"></div>
	<div dojoType="dijit.form.TextBox" title="Zip Code:" id="zip" name="zip" value="95131"></div>
	<div dojoType="dijit.form.TextBox" title="Amount:" id="netAmount" name="netAmount" value="1" readonly="true"></div>
 </div>
 <button type="submit" dojoType="dijit.form.Button" id="submitButton">Save It</button>
 <button dojoType="dijit.form.Button"  onClick="dijit.byId('loadDiv').hide();" id="cancelButton">Cancel</button>
</div>
<script type="text/javascript">
	function submitForm() {
		var button = dijit.byId("submitButton");
		dojo.connect(button, "onClick", function(event) {			
			 //Stop the submit event since we want to control form submission.
            event.preventDefault();
            event.stopPropagation();

            //The parameters to pass to xhrPost, the form, how to handle it, and the callbacks.
            //Note that there isn't a url passed.  xhrPost will extract the url to call from the form's
            //'action' attribute.  You could also leave off the action attribute and set the url of the xhrPost object
            //either should work.
            var xhrArgs = {
                form: dojo.byId("dataForm"),
                handleAs: "text",
                load: function(data) {
                    dojo.byId("response").innerHTML = "Form posted.";
                },
                error: function(error) {
                    //We'll 404 in the demo, but that's okay.  We don't have a 'postIt' service on the
                    //docs server.
                    dojo.byId("response").innerHTML = "Form posted.";
                }
            }
            //Call the asynchronous xhrPost
            dojo.byId("response").innerHTML = "Form being sent..."
            var deferred = dojo.xhrPost(xhrArgs);
		});
	}
	dojo.addOnLoad(submitForm);
</script>
